<template>
	<!-- <div class="container">
      <div 
        class="valentine"
        @mouseenter="openCard"
        @mouseleave="closeCard"
      >
        <div class="envelope"></div>
        <div class="card" :style="{ top: cardTop }">
          <div class="txt" v-html="displayText + (showCursor ? '_' : '')"></div>
        </div>
        <div class="front"></div>
      </div>
      <div class="shadow"></div>
    </div> -->

	<div class="qing-love-box">
		<div class="love-box">
			<div class="letter-cover"></div>
			<div class="love-box-content" v-html="displayText + (showCursor ? '_' : '')"></div>
			<div class="letter-right"></div>
			<div class="letter-left"></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			cardTop: "6px",
			fullText: `你好2023:
          <div class="content">2月14日情人节快乐。。。</div>
        `,
			displayText: "",
			typingProgress: 0,
			typingInterval: null,
			cursorInterval: null,
			showCursor: false,
		};
	},
	methods: {
		openCard() {
			this.cardTop = "-90px";
			this.startTypewriter();
			this.cursorInterval = setInterval(() => {
				this.showCursor = !this.showCursor;
			}, 500);
		},
		closeCard() {
			this.cardTop = "6px";
			clearInterval(this.typingInterval);
			clearInterval(this.cursorInterval);
		},
		startTypewriter() {
			this.typingProgress = 0;
			this.displayText = "";
			this.typingInterval = setInterval(() => {
				const curr = this.fullText.substr(this.typingProgress, 1);
				if (curr === "<") {
					this.typingProgress = this.fullText.indexOf(">", this.typingProgress) + 1;
				} else {
					this.typingProgress++;
				}
				this.displayText = this.fullText.substring(0, this.typingProgress);
				if (this.typingProgress >= this.fullText.length) {
					clearInterval(this.typingInterval);
					clearInterval(this.cursorInterval);
					this.showCursor = false;
				}
			}, 100);
		},
	},
	beforeUnmount() {
		clearInterval(this.typingInterval);
		clearInterval(this.cursorInterval);
	},
};
</script>

<style lang="scss" scoped>
//   .container {
//     margin: 0;
//     height: 100vh;
//     background: #fae1dd;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     flex-direction: column;
//     position: relative;
//   }

//   .valentine {
//     position: relative;
//     animation: up 3s linear infinite;
//     cursor: pointer;

//     @keyframes up {
//       0%, 100% {
//         transform: translateY(0);
//       }
//       50% {
//         transform: translateY(-50px);
//       }
//     }
//   }

//   .envelope {
//     width: 450px;
//     height: 300px;
//     background-color: #f08080;
//     position: relative;

//     &::before {
//       content: "";
//       width: 318px;
//       height: 318px;
//       background-color: #f08080;
//       position: absolute;
//       transform: rotate(-45deg);
//       transform-origin: 0 0;
//       border-top-right-radius: 30px;
//     }
//   }

//   .front {
//     width: 0;
//     height: 0;
//     border-top: 143px solid transparent;
//     border-bottom: 150px solid transparent;
//     border-right: 270px solid #f4978e;
//     position: absolute;
//     top: 6px;
//     left: 180px;

//     &::before {
//       content: "";
//       position: absolute;
//       width: 0;
//       height: 0;
//       border-top: 293px solid transparent;
//       border-left: 450px solid #f8ad9d;
//       top: -142px;
//       left: -180px;
//     }
//   }

//   .card {
//     width: 410px;
//     height: 255px;
//     background-color: #eae2b7;
//     position: absolute;
//     top: 6px;
//     left: 20px;
//     box-shadow: -5px -5px 100px rgb(0 0 0 / 0.4);
//     transition: top 0.5s ease;
//   }

//   .txt {
//     padding: 30px;
//     font-size: 16px;
//     color: #003049;
//   }

//   .content {
//     margin-left: 20px;
//     margin-top: 20px;
//     font-size: 20px;
//   }

//   .shadow {
//     width: 495px;
//     height: 38px;
//     background: rgb(0 0 0 / 0.3);
//     position: absolute;
//     bottom: 120px;
//     border-radius: 50%;
//     animation: shadow-size 3s linear infinite;

//     @keyframes shadow-size {
//       0%, 100% {
//         transform: scaleX(1);
//       }
//       50% {
//         transform: scaleX(0.85);
//       }
//     }
//   }



.qing-love-box {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #69ff97, #00e4ff);

	.love-box {
		width: 90vw;
		height: 230px;
		background: red;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;

		.letter-cover {
			width: 0;
			height: 0;
			border-left: 45vw solid transparent;
			border-right: 45vw solid transparent;
			border-bottom: 150px solid pink; /* 三角形颜色 */
			position: absolute;
			top: -150px;
			transform: rotate(180deg);
			transform-origin: center bottom;
		}

		.love-box-content {
			width: 90%;
			height: auto;
			background-color: pink;
			padding: 20px;
			box-sizing: border-box;
		}

		.letter-right {
			width: 0;
			height: 0;
			border-bottom: 230px solid #f8ad9d;
			border-left: 90vw solid transparent;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 520;
		}
		.letter-left {
			width: 0;
			height: 0;
			border-bottom: 230px solid #f08080;
			border-right: 90vw solid transparent;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 521;
		}
	}
}
</style>
